<template>
  <view class="selectComponent">
    <uni-popup
      ref="popupSelect"
      type="bottom"
      background-color="#fff"
      style="border-radius: 22rpx 22rpx 0 0 !important"
    >
      <view class="select-buttom">
        <text class="cancel btn-size" @tap="cancelPop">取消</text>
        <text class="sure btn-size" @tap="completeSure">确定</text>
      </view>
      <picker-view
        :value="pickerDefault"
        class="picker-view"
        style="width: 100%; height: 400rpx"
        @change="pickerChange"
      >
        <picker-view-column>
          <view
            style="line-height: 68rpx; text-align: center"
            class="item"
            v-for="(item, index) in pickerObjList.option"
            :key="index"
            >{{ item }}</view
          >
        </picker-view-column>
      </picker-view>
    </uni-popup>
  </view>
</template>
<script lang="ts" setup>
import type { PickerViewOnChangeEvent } from '@uni-helper/uni-app-types/index'
import { ref } from 'vue'
const emits = defineEmits(['pickerfinish'])
const popupSelect = ref<any>(null)
const pickerValue = ref('') //当前选择的值
const pickerDefault = ref([0]) //默认选择的值
// const timer = ref<any>(null)
const openPop = () => {
  popupSelect.value?.open('bottom')
}
interface PickOption {
  type: string
  option: Array<string>
}

const props = withDefaults(
  defineProps<{
    pickerObjList: PickOption
  }>(),
  {},
)

const completeSure = () => {
  pickerValue.value = props.pickerObjList?.option[pickerDefault.value[0]]
  const data = {
    type: props.pickerObjList?.type,
    value: pickerValue.value,
  }
  emits('pickerfinish', data)
  cancelPop()
}
const pickerChange = (e: PickerViewOnChangeEvent) => {
  pickerDefault.value = e.detail.value
}

// 输入框内容改变
// const inputChange = (e: any) => {
//   clearTimeout(timer.value)

//   timer.value = setTimeout(() => {
//     console.log(e)
//   }, 1000)
// }

const cancelPop = () => {
  popupSelect.value?.close()
}
defineExpose({
  openPop,
})
</script>
<style lang="scss" scoped>
.selectComponent {
  .select-buttom {
    margin-top: 20rpx;
    display: flex;
    padding: 20rpx;
    justify-content: space-between;
    align-items: center;
    .btn-size {
      padding: 20rpx;
    }
    .sure {
      background-color: #006eff;
      border-radius: 14rpx;
      color: #ffffff;
    }
  }
}
</style>
